import React, {memo} from 'react';
import {Row, Col, Card, Icon, Tooltip, DatePicker} from 'antd';
import {FormattedMessage, formatMessage} from '@/utils/locale';
import styles from './Analysis.less';
import {Pie, WaterWave, Gauge, Field, ChartCard, MiniProgress, MiniBar} from '@/components/Charts';
import Trend from '@/components/Trend';
import MyDeviceTypeSelect from "../../components/MyDeviceTypeSelect";

const {RangePicker} = DatePicker;

const row1ResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 12,
  xl: 12,
  style: {marginBottom: 24, paddingRight: 48,},
};

const row2ResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 4,
  xl: 4,
  style: {marginBottom: 24,},
};
const row3ResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 6,
  xl: 6,
  style: {marginBottom: 24, paddingLeft: 48,},
};


const DeviceDataCard = memo(
  ({loading, devicePieData, deviceData, batteryLowRecord, isActive, handleDatePickerChange, datePickerValue, current_battery_low, history, onChangeQueryTime,getDeviceID}) => {
    const batteryLowRecordTotal = batteryLowRecord.reduce((y, b) => {
      return y + b.y
    }, 0);
    // devicePieData //在线设备数 [{x:'在线设备数',y:1},{x:'离线设备数',y:1}]
    return (
      <Card loading={loading}
            bordered={false}
            bodyStyle={{padding: 0}}
            title={
              <React.Fragment>
                <FormattedMessage
                  id="app.analysis.dashboard.device.data"
                />
                <MyDeviceTypeSelect getDeviceID={getDeviceID}/>
              </React.Fragment>
            }
            extra={
              <div className={styles.salesExtraWrap} style={{textAlign: 'center',}}>
                < div className={styles.salesExtra}>
                </div>
                <DatePicker value={datePickerValue} onChange={handleDatePickerChange} />
              </div>
            }
      >
        <Row gutter={24}>
          <Col {...row1ResponsiveProps}>
            <Pie
                hasLegend
                subTitle={<FormattedMessage id="app.analysis.dashboard.device.total"/>}
                total={deviceData.device_total}
                data={devicePieData}
                // valueFormat={value => value}
                height={248}
                lineWidth={4}
                onTitleClick={() => {
                  history.push('/device')
                }}
            />
          </Col>

          <Col {...row2ResponsiveProps}>
            <ChartCard
                loading={loading}
                bordered={false}
                contentHeight={100}
                style={{marginTop: 48, textAlign: "center",}}
            >
              <WaterWave
                  height={161}
                  title="设备使用率"
                  percent={deviceData.device_usage_rate}
                  value={`${deviceData.device_usage_rate} %`}
              />
            </ChartCard>
          </Col>

          <Col {...row3ResponsiveProps}>
            <ChartCard
                bordered={false}
                loading={loading}
                title={"异常次数、电量低"}
                style={{marginTop: 48, cursor: 'pointer'}}
                total={batteryLowRecordTotal}
                footer={
                  <Field
                      label={
                        "当日异常次数"
                      }
                      value={current_battery_low}
                  />
                }
                contentHeight={46}
                onClick={() => {
                  onChangeQueryTime();
                  history.push('/report/error')
                }}
            >
              <MiniBar data={batteryLowRecord}/>
            </ChartCard>
          </Col>
        </Row>
      </Card>
    )
  }
);

export default DeviceDataCard;
